<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Grid Navigation Effects with jQuery</title>
		<meta charset="UTF-8" />
        	<meta name="description" content="Grid Navigation Effects with jQuery" />
        	<meta name="keywords" content="jquery, effects, grid, animation, css3, images, thumbnails, slide, animate, fade, disperse, random" />
		<meta name="author" content="Codrops" />
        	<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/gridNavigation.css" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/jquery.gridnav.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#tj_container').gridnav();
			});
		</script>
    </head>
    <body>
		<div class="container">
			<div class="header">
				<h1>Grid Navigation Effects<span>with jQuery</span></h1>
				<h2>Default (show/hide)</h2>
			</div>
			<div class="content example1">
				<div id="tj_container" class="tj_container">
					<div class="tj_nav">
						<span id="tj_prev" class="tj_prev">Previous</span>
						<span id="tj_next" class="tj_next">Next</span>
					</div>
					<div class="tj_wrapper">
						<ul class="tj_gallery">
							<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
							<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
							<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
							<li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
							<li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
							<li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
							<li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
							<li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
							<li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
							<li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
							<li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
							<li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
							<li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
							<li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
							<li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
							<li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
							<li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
							<li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
							<li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
							<li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="more">
				<ul>
					<li>More examples:</li>
					<li class="selected"><a href="example1.html">Default (show/hide)</a></li>
					<li><a href="example2.html">Fade</a></li>
					<li><a href="example3.html">Sequential fade</a></li>
					<li><a href="example4.html">Move/fade</a></li>
					<li><a href="example5.html">Sequential move/fade</a></li>
					<li><a href="example6.html">Sequential move/fade reversed</a></li>
					<li><a href="example7.html">Resize (show/hide)</a></li>
					<li><a href="example8.html">Disperse</a></li>
					<li><a href="example9.html">Rows move</a></li>
					<li><a href="example10.html">Sequential move/fade (3 rows)</a></li>
				</ul>
			</div>
			<div class="footer">
				<a href="http://tympanus.net/Tutorials/ImageWall/"><span>&laquo; Previous Demo: </span>Image Wall with jQuery</a>
				<span class="right_ab">
					<a href="http://www.behance.net/AndrewLili" target="_blank">Photos by Andrey and Lili</a>
					<a href="http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/"><strong>back to the Codrops post</strong></a>
				</span>
			</div>
		</div>
		
    </body>
</html>